<template>
	
	<view :style="{paddingTop: systemBarHeight + 'px'}" >
		<view class="v1" style="height:{{clientHeight?clientHeight+'px':'auto'}};margin-top: 60rpx;">
		 
		 <!-- v2父容器  子view使用绝对布局 -->
			<view class="v2">
				<view class="dltext" style="width: 100%; height: 92rpx; display: block; box-sizing: border-box; left: 0rpx; top: -2rpx">智慧多肉系统注册</view>
						  
				<!-- 手机号 -->
				<view class="phoneCs">
					<!-- <image src="../../images/account.png" class="ph"></image> -->
					<input placeholder="请输入用户名" type="number"  />
				</view>
				<!-- 密码 -->
				<view class="passwordCs">
					<!-- <image src="../../images/password.png" class="ps"></image> -->
					<input placeholder="请输入密码"  type="password" />
				</view>
				<!-- 登录按钮 -->
				<view class="denglu">
					<button class="btn-dl" type="primary" @click="goadmin">注册</button>
				</view>
			</view>
		 </view>
		  
		
		

	</view>
</template>

<script setup>
import {ref} from "vue"
/**
 * 计算顶部到导航栏的距离
 */
const systemBarHeight=ref(0);
const getSysteminfo =() =>  {
  uni.getSystemInfo({
    success: res => {
      console.log(res.statusBarHeight)
      systemBarHeight.value = res.statusBarHeight;
    }
  });
}
getSysteminfo();



</script>

<style lang="scss">
.user-bar{
	background-color: #21bc78;
	height: 450rpx;
	width: 690rpx;
	width: 100%;
}	

/* pages/login/login.wxss *//* 最大的父元素 */
.v1{
  display: block;
  position:absolute;
  width: 100%;
  background-color: white;
}
/* 白色区域 */
.v1 .v2{
  position: relative;
  margin-top: 150rpx;
  left: 50rpx; 
  width: 545rpx;
  height: 600rpx;
  background-color: white;
  border-radius: 50rpx;
}
/* 白色区域内的登录文本 */
.v1 .v2 .dltext{
  margin-top: 50rpx;
  position: absolute;
  margin-left:50rpx;
  width: 150rpx;
  height: 100rpx;
  font-size: 60rpx;
  font-family: Helvetica;
  color: #000000;
  line-height: 100rpx;
  letter-spacing: 2rpx;
}
/* 手机图片+输入框+下划线的父容器view */
.v1 .v2 .phoneCs{
  margin-top: 200rpx;
  margin-left: 25rpx;
  position: absolute;
  display: flex;
  width:600rpx ;
  height: 90rpx ;
  background-color: rgb(250, 248, 248);
  border-radius: 50rpx;

  
}
/* 手机图标 */
.v1 .v2 .phoneCs .ph{
  margin-top: 20rpx;
  margin-left: 30rpx;
  width: 45rpx;
  height: 45rpx;
}
/* 手机号输入框 */
.v1 .v2 .phoneCs input{
  width: 600rpx;
  font-size: 30rpx ;
  margin-top: 25rpx;
  margin-left: 30rpx;
}
/* 密码图标+输入框+小眼睛图标+下划线父容器view */
.v1 .v2 .passwordCs{
  margin-top: 350rpx;
  margin-left: 25rpx;
  position: absolute;
  display: flex;
  width:600rpx ;
  height: 90rpx ;
  background-color: rgb(250, 248, 248);
  border-radius: 50rpx;

}
.v1 .v2 .code{
  width: 200rpx;
  line-height: 90rpx;
  margin: 0 auto;
}
/* 密码图标 */
.v1 .v2 .passwordCs .ps{
  margin-top: 20rpx;
  margin-left: 30rpx;
  width: 55rpx;
  height: 50rpx;
}
/* 眼睛 图标*/
.v1 .v2 .passwordCs .eye{
  margin-top: 5rpx;
  margin-left: 65rpx;
  width: 55rpx;
  height: 55rpx;
}
/* 密码输入框 */
.v1 .v2 .passwordCs input{
  width: 400rpx;
  font-size: 30rpx ;
  margin-top: 25rpx;
  margin-left: 30rpx;
}
/* 登录按钮容器view */
.v1 .v2 .denglu{
  width: 600rpx;
  height: 80rpx;
  position: absolute;
  margin-top:515rpx;
  margin-left:25rpx;
}
/* 登录按钮 */
.v1 .v2 .denglu button{
  padding: 0rpx;
  line-height: 70rpx;
  font-size: 30rpx;
  width: 100%;
  height: 100%;
  border-radius: 50rpx;
}

</style>
